//遮罩层滚动显示透明度

var max = 1500;//滚动条走到的最大距离,这时shadow就不会变化了

function getPos(obj) {//取元素离html顶部的距离
	var t = obj.offsetTop;
	
	while (obj = obj.offsetParent) {//把元素的父级赋值给元素
		t += obj.offsetTop;
	}
	return t;
}

(function () {
	var shadow = document.querySelector('#shadow');
	
	var appointment = document.querySelector('.appointment'),
		appointmentBtn = document.querySelectorAll('.appointmentBtn')[1];
	
	function scroll() {
		var top = this.pageYOffset;//滚动条走的距离
		// if(top<=max){
		// 	shadow.style.opacity=top/max;
		// }else{
		// 	shadow.style.opacity=1;
		// }
		
		shadow.style.opacity = top <= max ? top / max : 1;//是否显示隐藏遮罩层
		
		appointment.style.visibility = top >= getPos(appointmentBtn) ? 'visible' : 'hidden';//吸顶导航
	}
	scroll();
	window.addEventListener('scroll', scroll);
})();


//侧边导航
(function () {
	var navigator = document.querySelector('#navigator'),
		lis = document.querySelectorAll('#navigator li'),
		anchor = document.querySelectorAll('.anchor');
	var cn = 0;//当前
	var ln = 0;//上一个
	var pos = [0];//存储所有锚点离html的距离，但是锚点的数量比右边导航列表的数量少一，所以给一个数据占位
	
	for (let i = 0; i < lis.length; i++) {
		pos.push(getPos(anchor[i]));//循环的时候把所有的锚点离html的位置存储
		lis[i].onmouseover = () => lis[i].className = 'active';
		lis[i].onmouseout = () => {
			if (i != cn) {//这个条件成立，说明离开的并不是当前元素
				lis[i].className = '';
			}
		};
		lis[i].onclick = () => {
			window.scrollTo({//滚动条滚动到
				top: pos[i],
				behavior: 'smooth'//滚动行为  smooth平滑滚动
			});
		};
	}
	
	function scroll() {
		var top = this.pageYOffset;
		
		pos.forEach((value, index) => {
			if (top >= value) {
				cn = index;//把cn的值设置成当前锚点的索引值
			}
		});
		
		if (cn < lis.length) {
			lis[ln].className = '';//上一个取消激活
			lis[cn].className = 'active';//当前激活状态
			
			ln = cn;
		}
	}
	
	scroll();
	window.addEventListener('scroll', scroll);
})();


//月下嘉宾选项卡
(function () {
	var btns = document.querySelectorAll('.guest .tab button');//按钮
	var contents = document.querySelectorAll('.guest .tabContent .scroll');//内容
	var ln = 1;//上一个选中的索引
	
	for (let i = 0; i < btns.length; i++) {
		btns[i].onclick = () => {
			btns[ln].className = '';
			btns[i].className = 'active';
			
			contents[ln].classList.remove('active');
			contents[i].classList.add('active');
			
			ln = i;
		};
	}
})();



// 中秋福利
(function () {
	var lis = document.querySelectorAll('.festival .prize li:not(.btn)');
	var btn = document.querySelector('.festival .prize li.btn');
	
	var cn = 0;
	var ln = 0;
	var time = 100;
	var interval = null;
	
	var times = 1;//剩余抽奖次数
	var sn = 7;//抽到的奖品索引
	
	var msg = ['哔哩哔哩幻星集Ⅱ2233金属书签', '哔哩哔哩日常系列2233Aloha篇抱枕', '哔哩哔哩小电视毛绒绒兔子包', '哔哩哔哩小电视兔子系列连帽围巾', '哔哩哔哩魔发师盲盒', '谢谢参与', '哔哩哔哩真无线蓝牙耳机礼盒【猫王定制】', '哔哩哔哩小电视透明PVC背包'];
	
	btn.onclick = () => {
		if (times == 0) {
			alert('抽奖次数不足');
			return;
		}
		
		interval = setInterval(() => {
			cn++;
			cn %= lis.length;
			
			lis[ln].className = '';
			lis[cn].className = 'active';
			
			ln = cn;
			
			setTimeout(() => {
				if (sn == cn) {//走到中奖商品哪了
					clearInterval(interval);
					lis[ln].className = '';//取消抽中奖品的class
					
					showMsg(sn);
				}
			}, 1000);
		}, time);
	};
	
	function showMsg(cn) {
		var dialog = document.querySelector('#dialog');
		var title = document.querySelector('#dialog .title');
		var content = document.querySelector('#dialog .content p');
		var btns = document.querySelectorAll('#dialog button');
		
		dialog.className = 'show';
		title.innerHTML = cn == 5 ? '空空的' : '中奖啦';
		content.innerHTML = cn == 5 ? '好遗憾,一定是姿势不对' : msg[cn];
		
		for (var i = 0; i < btns.length; i++) {
			btns[i].onclick = () => dialog.className = '';
		}
	}
})();


(function () {
	$.ajax({
		url: 'data/prizeList.json',
		success: function (res) {
			console.log(res);
			renderDom(res.data);
		}
	});
	
	function renderDom(list) {
		var ul = document.querySelector('.festival .scroll ul');
		var li = '';
		
		ul.innerHTML = '';
		list.forEach(data => li += `<li>${data.name}<span>通过抽奖获得了</span> ${data.gift_name}</li>`);
		
		ul.innerHTML = li;
		ul.innerHTML += li;
	}
	
	function rule() {
		var btn = document.querySelector('.rule button');
		var drawRule = document.querySelector('.drawRule ');
		var close = document.querySelector('.drawRule .close');
		
		btn.onclick = () => drawRule.classList.add('show');
		close.onclick = () => drawRule.classList.remove('show');
	}
	
	rule();
})();






















































